@strapi/admin 4.0.0 → 4.0.4

package/admin/src/components/LeftMenu/index.js

@@ -80,12 +80,20 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
     }
   };
 
+  const menuTitle = formatMessage({
+    id: 'app.components.LeftMenu.navbrand.title',
+    defaultMessage: 'Strapi Dashboard',
+  });
+
   return (
     <MainNav condensed={condensed}>
       <NavBrand
-        workplace="Workplace"
-        title="Strapi Dashboard"
-        icon={<img src={menuLogo} alt="Strapi Dashboard" />}
+        workplace={formatMessage({
+          id: 'app.components.LeftMenu.navbrand.workplace',
+          defaultMessage: 'Workplace',
+        })}
+        title={menuTitle}
+        icon={<img src={menuLogo} alt={menuTitle} />}
       />
 
       <Divider />
@@ -149,7 +157,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
         >
           <FocusTrap onEscape={handleToggleUserLinks}>
             <Stack size={0}>
-              <LinkUser onClick={handleToggleUserLinks} to="/me">
+              <LinkUser tabIndex={0} onClick={handleToggleUserLinks} to="/me">
                 <Typography>
                   {formatMessage({
                     id: 'app.components.LeftMenu.profile',
@@ -157,7 +165,7 @@ const LeftMenu = ({ generalSectionLinks, pluginsSectionLinks }) => {
                   })}
                 </Typography>
               </LinkUser>
-              <LinkUser onClick={handleLogout} logout="logout" to="/auth/login">
+              <LinkUser tabIndex={0} onClick={handleLogout} logout="logout" to="/auth/login">
                 <Typography textColor="danger600">
                   {formatMessage({
                     id: 'app.components.LeftMenu.logout',

package/admin/src/components/Notifications/Notification/index.js

@@ -40,18 +40,18 @@ const Notification = ({ dispatch, notification }) => {
     variant = 'default';
     alertTitle = formatMessage({
       id: 'notification.default.title',
-      defaultMessage: 'Information Alert:',
+      defaultMessage: 'Information:',
     });
   } else if (type === 'warning') {
     alertTitle = formatMessage({
       id: 'notification.warning.title',
-      defaultMessage: 'Warning Alert:',
+      defaultMessage: 'Warning:',
     });
     variant = 'danger';
   } else {
     alertTitle = formatMessage({
       id: 'notification.success.title',
-      defaultMessage: 'Success Alert:',
+      defaultMessage: 'Success:',
     });
     variant = 'success';
   }

package/admin/src/content-manager/components/CollectionTypeFormWrapper/index.js

@@ -200,10 +200,10 @@ const CollectionTypeFormWrapper = ({ allLayoutData, children, slug, id, origin }
 
   const displayErrors = useCallback(
     err => {
-      const errorPayload = err.response.payload;
+      const errorPayload = err.response.data;
       console.error(errorPayload);
 
-      let errorMessage = get(errorPayload, ['message'], 'Bad Request');
+      let errorMessage = get(errorPayload, ['error', 'message'], 'Bad Request');
 
       // TODO handle errors correctly when back-end ready
       if (Array.isArray(errorMessage)) {

package/admin/src/content-manager/components/ComponentInitializer/index.js

@@ -57,13 +57,10 @@ const ComponentInitializer = ({ error, isReadOnly, onClick }) => {
       </Box>
       {error?.id && (
         <Typography textColor="danger600" variant="pi">
-          {formatMessage(
-            {
-              id: error.id,
-              defaultMessage: error.defaultMessage,
-            },
-            error.values
-          )}
+          {formatMessage({
+            id: error.id,
+            defaultMessage: error.id,
+          })}
         </Typography>
       )}
     </>
@@ -78,8 +75,6 @@ ComponentInitializer.defaultProps = {
 ComponentInitializer.propTypes = {
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
   }),
   isReadOnly: PropTypes.bool,
   onClick: PropTypes.func.isRequired,

package/admin/src/content-manager/components/DragLayer/index.js

@@ -54,7 +54,7 @@ const CustomDragLayer = () => {
     <LayoutDndProvider>
       <div style={layerStyles}>
         <div style={getItemStyles(initialOffset, currentOffset, mouseOffset)} className="col-md-2">
-          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD].includes(itemType) && (
+          {[ItemTypes.EDIT_RELATION, ItemTypes.EDIT_FIELD, ItemTypes.FIELD].includes(itemType) && (
             <CardPreview labelField={item.labelField} />
           )}
           {itemType === ItemTypes.COMPONENT && (

package/admin/src/content-manager/components/DynamicTable/CellContent/CellValue.js

@@ -1,6 +1,7 @@
 import PropTypes from 'prop-types';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
+import { getNumberOfDecimals } from './utils/getNumberOfDecimals';
 
 const CellValue = ({ type, value }) => {
   const { formatDate, formatTime, formatNumber } = useIntl();
@@ -27,8 +28,17 @@ const CellValue = ({ type, value }) => {
     });
   }
 
-  if (['float', 'integer', 'biginteger', 'decimal'].includes(type)) {
-    formattedValue = formatNumber(value);
+  if (['float', 'decimal'].includes(type)) {
+    const numberOfDecimals = getNumberOfDecimals(value);
+
+    formattedValue = formatNumber(value, {
+      minimumFractionDigits: numberOfDecimals,
+      maximumFractionDigits: numberOfDecimals,
+    });
+  }
+
+  if (['integer', 'biginteger'].includes(type)) {
+    formattedValue = formatNumber(value, { maximumFractionDigits: 0 });
   }
 
   return toString(formattedValue);

package/admin/src/content-manager/components/DynamicTable/CellContent/utils/getNumberOfDecimals.js

@@ -0,0 +1,8 @@
+export const getNumberOfDecimals = value => {
+  if (value % 1 !== 0) {
+    // value has decimals
+    return value.toString().split('.')[1].length;
+  }
+
+  return 0;
+};

package/admin/src/content-manager/components/DynamicTable/index.js

@@ -16,6 +16,7 @@ const DynamicTable = ({
   canCreate,
   canDelete,
   contentTypeName,
+  action,
   isBulkable,
   isLoading,
   onConfirmDelete,
@@ -77,6 +78,7 @@ const DynamicTable = ({
     <Table
       components={{ ConfirmDialogDelete, ConfirmDialogDeleteAll }}
       contentType={contentTypeName}
+      action={action}
       isLoading={isLoading}
       headers={tableHeaders}
       onConfirmDelete={onConfirmDelete}
@@ -98,10 +100,15 @@ const DynamicTable = ({
   );
 };
 
+DynamicTable.defaultProps = {
+  action: undefined,
+};
+
 DynamicTable.propTypes = {
   canCreate: PropTypes.bool.isRequired,
   canDelete: PropTypes.bool.isRequired,
   contentTypeName: PropTypes.string.isRequired,
+  action: PropTypes.node,
   isBulkable: PropTypes.bool.isRequired,
   isLoading: PropTypes.bool.isRequired,
   layout: PropTypes.exact({

package/admin/src/content-manager/components/DynamicZone/components/DzLabel/index.js

@@ -17,7 +17,7 @@ const StyledBox = styled(Box)`
   border-radius: ${pxToRem(26)};
 `;
 
-const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) => {
+const DzLabel = ({ label, labelAction, name, numberOfComponents, required, intlDescription }) => {
   const { formatMessage } = useIntl();
   const intlLabel = formatMessage({ id: label || name, defaultMessage: label || name });
 
@@ -33,12 +33,24 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
           shadow="filterShadow"
           color="neutral500"
         >
-          <Flex>
-            <Typography fontSize={0} lineHeight={0} textColor="neutral600" fontWeight="bold">
-              {intlLabel}&nbsp;({numberOfComponents})
-            </Typography>
-            {required && <Typography textColor="danger600">*</Typography>}
-            {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
+          <Flex direction="column" justifyContent="center">
+            <Flex maxWidth={pxToRem(356)}>
+              <Typography variant="pi" textColor="neutral600" fontWeight="bold" ellipsis>
+                {intlLabel}&nbsp;
+              </Typography>
+              <Typography variant="pi" textColor="neutral600" fontWeight="bold">
+                ({numberOfComponents})
+              </Typography>
+              {required && <Typography textColor="danger600">*</Typography>}
+              {labelAction && <Box paddingLeft={1}>{labelAction}</Box>}
+            </Flex>
+            {intlDescription && (
+              <Box paddingTop={1} maxWidth={pxToRem(356)}>
+                <Typography variant="pi" textColor="neutral600" ellipsis>
+                  {formatMessage(intlDescription)}
+                </Typography>
+              </Box>
+            )}
           </Flex>
         </StyledBox>
       </Box>
@@ -47,12 +59,17 @@ const DzLabel = ({ label, labelAction, name, numberOfComponents, required }) =>
 };
 
 DzLabel.defaultProps = {
+  intlDescription: undefined,
   label: '',
   labelAction: undefined,
   required: false,
 };
 
 DzLabel.propTypes = {
+  intlDescription: PropTypes.shape({
+    id: PropTypes.string.isRequired,
+    defaultMessage: PropTypes.string.isRequired,
+  }),
   label: PropTypes.string,
   labelAction: PropTypes.element,
   name: PropTypes.string.isRequired,

package/admin/src/content-manager/components/DynamicZone/index.js

@@ -1,4 +1,4 @@
-import React, { memo, useCallback, useMemo, useState } from 'react';
+import React, { memo, useCallback, useMemo, useState, useEffect } from 'react';
 import get from 'lodash/get';
 import isEqual from 'react-fast-compare';
 import PropTypes from 'prop-types';
@@ -37,11 +37,36 @@ const DynamicZone = ({
 }) => {
   const toggleNotification = useNotification();
   const [isOpen, setIsOpen] = useState(false);
+  const [shouldOpenAddedComponent, setShouldOpenAddedComponent] = useState(false);
   const dynamicDisplayedComponentsLength = dynamicDisplayedComponents.length;
+  const intlDescription = metadatas.description
+    ? { id: metadatas.description, defaultMessage: metadatas.description }
+    : null;
+
   const [componentCollapses, setComponentsCollapses] = useState(
     createCollapses(dynamicDisplayedComponentsLength)
   );
 
+  useEffect(() => {
+    setComponentsCollapses(createCollapses(dynamicDisplayedComponentsLength));
+  }, [dynamicDisplayedComponentsLength]);
+
+  useEffect(() => {
+    if (shouldOpenAddedComponent) {
+      setComponentsCollapses(prev =>
+        prev.map((collapse, index) => {
+          if (index === prev.length - 1) {
+            return { ...collapse, isOpen: true };
+          }
+
+          return collapse;
+        })
+      );
+
+      setShouldOpenAddedComponent(false);
+    }
+  }, [shouldOpenAddedComponent]);
+
   // We cannot use the default props here
   const { max = Infinity, min = -Infinity } = fieldSchema;
   const dynamicZoneErrors = useMemo(() => {
@@ -68,7 +93,7 @@ const DynamicZone = ({
       setIsOpen(false);
 
       addComponentToDynamicZone(name, componentUid, hasError);
-      setComponentsCollapses(prev => [...prev, { isOpen: true }]);
+      setShouldOpenAddedComponent(true);
     },
     [addComponentToDynamicZone, hasError, name]
   );
@@ -132,18 +157,12 @@ const DynamicZone = ({
 
   const handleRemoveComponent = (name, currentIndex) => {
     removeComponentFromDynamicZone(name, currentIndex);
-
-    setComponentsCollapses(prev => prev.filter((_, index) => index !== currentIndex));
   };
 
   if (!isFieldAllowed && isCreatingEntry) {
     return (
       <NotAllowedInput
-        description={
-          metadatas.description
-            ? { id: metadatas.description, defaultMessage: metadatas.description }
-            : null
-        }
+        description={intlDescription}
         intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
         labelAction={labelAction}
         name={name}
@@ -154,11 +173,7 @@ const DynamicZone = ({
   if (!isFieldAllowed && !isFieldReadable && !isCreatingEntry) {
     return (
       <NotAllowedInput
-        description={
-          metadatas.description
-            ? { id: metadatas.description, defaultMessage: metadatas.description }
-            : null
-        }
+        description={intlDescription}
         intlLabel={{ id: metadatas.label, defaultMessage: metadatas.label }}
         labelAction={labelAction}
         name={name}
@@ -171,6 +186,7 @@ const DynamicZone = ({
       {dynamicDisplayedComponentsLength > 0 && (
         <Box>
           <DzLabel
+            intlDescription={intlDescription}
             label={metadatas.label}
             labelAction={labelAction}
             name={name}
@@ -183,7 +199,7 @@ const DynamicZone = ({
               dynamicDisplayedComponentsLength > 0 &&
               index < dynamicDisplayedComponentsLength - 1;
             const showUpIcon = isFieldAllowed && dynamicDisplayedComponentsLength > 0 && index > 0;
-            const isOpen = componentCollapses[index].isOpen;
+            const isOpen = componentCollapses[index]?.isOpen || false;
 
             return (
               <Component

package/admin/src/content-manager/components/EditViewDataManagerProvider/utils/schema.js

@@ -338,7 +338,10 @@ const createYupSchemaAttribute = (type, validations, options) => {
           break;
         }
         case 'regex':
-          schema = schema.matches(new RegExp(validationValue), errorsTrads.regex);
+          schema = schema.matches(new RegExp(validationValue), {
+            message: errorsTrads.regex,
+            excludeEmptyString: !validations.required,
+          });
           break;
         case 'lowercase':
           if (['text', 'textarea', 'email', 'string'].includes(type)) {

package/admin/src/content-manager/components/InputUID/index.js

@@ -32,6 +32,7 @@ const InputUID = ({
   onChange,
   value,
   placeholder,
+  required,
 }) => {
   const { modifiedData, initialData, layout } = useCMEditViewDataManager();
   const [isLoading, setIsLoading] = useState(false);
@@ -244,6 +245,7 @@ const InputUID = ({
       onChange={handleChange}
       placeholder={formattedPlaceholder}
       value={value || ''}
+      required={required}
     />
   );
 };
@@ -275,6 +277,7 @@ InputUID.propTypes = {
     defaultMessage: PropTypes.string.isRequired,
     values: PropTypes.object,
   }),
+  required: PropTypes.bool,
 };
 
 InputUID.defaultProps = {
@@ -284,6 +287,7 @@ InputUID.defaultProps = {
   labelAction: undefined,
   placeholder: undefined,
   value: '',
+  required: false,
 };
 
 export default InputUID;

package/admin/src/content-manager/components/PreviewWysiwyg/Wrapper.js

@@ -47,6 +47,10 @@ const Wrapper = styled.div`
     font-weight: 800;
   }
 
+  em {
+    font-style: italic;
+  }
+
   blockquote {
     margin-top: 41px;
     margin-bottom: 34px;

package/admin/src/content-manager/components/RepeatableComponent/AccordionGroupCustom/index.js

@@ -92,7 +92,7 @@ const AccordionGroupCustom = ({ children, footer, label, labelAction, error }) =
       {error && (
         <Box paddingTop={1}>
           <Typography variant="pi" textColor="danger600">
-            {formatMessage({ id: error.id, defaultMessage: error.defaultMessage }, error.values)}
+            {formatMessage({ id: error.id, defaultMessage: error.id })}
           </Typography>
         </Box>
       )}
@@ -111,8 +111,6 @@ AccordionGroupCustom.propTypes = {
   children: PropTypes.node.isRequired,
   error: PropTypes.shape({
     id: PropTypes.string.isRequired,
-    defaultMessage: PropTypes.string.isRequired,
-    values: PropTypes.object,
   }),
   footer: PropTypes.node,
   label: PropTypes.string,

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/IconButtonCustoms.js

@@ -20,10 +20,6 @@ export const CustomIconButton = styled(IconButton)`
   }
 `;
 
-export const DragHandleWrapper = styled(CustomIconButton)`
-  cursor: move;
-`;
-
 export const CustomIconButtonSibling = styled(IconButton)`
   background-color: transparent;
 

package/admin/src/content-manager/components/RepeatableComponent/DraggedItem/index.js

@@ -3,12 +3,14 @@ import React, { memo, useEffect, useRef, useState } from 'react';
 import PropTypes from 'prop-types';
 import { useDrag, useDrop } from 'react-dnd';
 import { getEmptyImage } from 'react-dnd-html5-backend';
+import styled from 'styled-components';
 import { useIntl } from 'react-intl';
 import toString from 'lodash/toString';
 import { Accordion, AccordionToggle, AccordionContent } from '@strapi/design-system/Accordion';
 import { Grid, GridItem } from '@strapi/design-system/Grid';
 import { Stack } from '@strapi/design-system/Stack';
 import { Box } from '@strapi/design-system/Box';
+import { Tooltip } from '@strapi/design-system/Tooltip';
 import Trash from '@strapi/icons/Trash';
 import Drag from '@strapi/icons/Drag';
 import ItemTypes from '../../../utils/ItemTypes';
@@ -17,9 +19,23 @@ import Inputs from '../../Inputs';
 import FieldComponent from '../../FieldComponent';
 import Preview from './Preview';
 import DraggingSibling from './DraggingSibling';
-import { CustomIconButton, DragHandleWrapper } from './IconButtonCustoms';
+import { CustomIconButton } from './IconButtonCustoms';
 import { connect, select } from './utils';
 
+const DragButton = styled.span`
+  display: flex;
+  align-items: center;
+  height: ${({ theme }) => theme.spaces[7]};
+
+  padding: 0 ${({ theme }) => theme.spaces[3]};
+  cursor: all-scroll;
+
+  svg {
+    width: ${12 / 16}rem;
+    height: ${12 / 16}rem;
+  }
+`;
+
 /* eslint-disable react/no-array-index-key */
 
 // Issues:
@@ -40,7 +56,7 @@ const DraggedItem = ({
   // Retrieved from the select function
   moveComponentField,
   removeRepeatableField,
-  setIsDraggingSiblig,
+  setIsDraggingSibling,
   triggerFormValidation,
   // checkFormErrors,
   displayedValue,
@@ -125,7 +141,7 @@ const DraggedItem = ({
     end: () => {
       // Update the errors
       triggerFormValidation();
-      setIsDraggingSiblig(false);
+      setIsDraggingSibling(false);
     },
     collect: monitor => ({
       isDragging: monitor.isDragging(),
@@ -138,9 +154,9 @@ const DraggedItem = ({
 
   useEffect(() => {
     if (isDragging) {
-      setIsDraggingSiblig(true);
+      setIsDraggingSibling(true);
     }
-  }, [isDragging, setIsDraggingSiblig]);
+  }, [isDragging, setIsDraggingSibling]);
 
   // Effect in order to force a rerender after reordering the components
   // Since we are removing the Accordion when doing the DnD  we are losing the dragRef, therefore the replaced element cannot be dragged
@@ -195,16 +211,22 @@ const DraggedItem = ({
                     })}
                     icon={<Trash />}
                   />
-                  <DragHandleWrapper
-                    expanded={isOpen}
-                    icon={<Drag />}
-                    label={formatMessage({
+                  {/* react-dnd is broken in firefox with our IconButton, maybe a ref issue */}
+                  <Tooltip
+                    description={formatMessage({
                       id: getTrad('components.DragHandle-label'),
                       defaultMessage: 'Drag',
                     })}
-                    noBorder
-                    ref={refs.dragRef}
-                  />
+                  >
+                    <DragButton
+                      role="button"
+                      tabIndex={-1}
+                      ref={refs.dragRef}
+                      onClick={e => e.stopPropagation()}
+                    >
+                      <Drag />
+                    </DragButton>
+                  </Tooltip>
                 </Stack>
               )
             }
@@ -268,7 +290,7 @@ const DraggedItem = ({
 DraggedItem.defaultProps = {
   isDraggingSibling: false,
   isOpen: false,
-  setIsDraggingSiblig: () => {},
+  setIsDraggingSibling: () => {},
   toggleCollapses: () => {},
 };
 
@@ -284,7 +306,7 @@ DraggedItem.propTypes = {
   toggleCollapses: PropTypes.func,
   moveComponentField: PropTypes.func.isRequired,
   removeRepeatableField: PropTypes.func.isRequired,
-  setIsDraggingSiblig: PropTypes.func,
+  setIsDraggingSibling: PropTypes.func,
   triggerFormValidation: PropTypes.func.isRequired,
   // checkFormErrors: PropTypes.func.isRequired,
   displayedValue: PropTypes.string.isRequired,

package/admin/src/content-manager/components/RepeatableComponent/index.js

@@ -47,7 +47,7 @@ const RepeatableComponent = ({
   const toggleNotification = useNotification();
   const { formatMessage } = useIntl();
   const [collapseToOpen, setCollapseToOpen] = useState('');
-  const [isDraggingSibling, setIsDraggingSiblig] = useState(false);
+  const [isDraggingSibling, setIsDraggingSibling] = useState(false);
   const [, drop] = useDrop({ accept: ItemTypes.COMPONENT });
   const { getComponentLayout } = useContentTypeLayout();
   const componentLayoutData = useMemo(() => getComponentLayout(componentUid), [
@@ -173,7 +173,7 @@ const RepeatableComponent = ({
               }}
               parentName={name}
               schema={componentLayoutData}
-              setIsDraggingSiblig={setIsDraggingSiblig}
+              setIsDraggingSibling={setIsDraggingSibling}
               toggleCollapses={toggleCollapses}
             />
           );